<template>
	<div id="tmpl">
		<div id="desc">
			<div class="title">
				<h4>{{photoinfo.title}}</h4>
				<p>{{photoinfo.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}  {{photoinfo.click}}次浏览
				</p>
				<p class="line"></p>
			</div>
				<!--缩略图-->
                <vue-images :imgs="images"
                            :modalclose="modalclose"
                            :keyinput="keyinput"
                            :mousescroll="mousescroll"
                            :showclosebutton="showclosebutton"
                            :showcaption="showcaption"
                            :imagecountseparator="imagecountseparator"
                            :showimagecount="showimagecount"
                            :showthumbnails="showthumbnails">
                </vue-images>
			<!--图片详情- 摘要部分-->
			<p v-html="photoinfo.content"></p>
		</div>
		
		<!--2.0。3 集成评论组件-->
		<div id="comment"> 
			<comment :id="id"></comment>
		</div>
	</div>
</template>
<script>
	import comment from '../subcom/comment.vue';
	import common from '../../kits/common.js';
	import { Toast } from 'mint-ui';
	import vueImages from 'vue-images';
	export default{
		components:{
			comment, //2.0.1 注册评论组件
			 vueImages
		},
		data(){
			return{
				id:0,
				photoinfo:{

				},
				images :[
						
				],
				modalclose: true,
					      keyinput: true,
					      mousescroll: true,
					      showclosebutton: true,
					      showcaption: true,
					      imagecountseparator: 'of',
					      showimagecount: true,
					      showthumbnails: true
			}
		},
		created(){
			this.id=this.$route.params.id;
			this.getinfo();
			this.getimgs();
		},
		methods:{
			getimgs(){
				var url = common.apidomain + '/api/getthumimages/'+this.id;
				this.$http.get(url).then(function(res){
					var body = res.body;
					if(body.status != 0 ){
						Toast(body.message);
						return;
					}

//					将正常的逻辑数据赋值给this.list数组
//					由于vue-preview组件要求的数据是 {src:,w:,h:}但是服务器响应回来的数据中是没有 w ,h 的，所以只能自己添加了
					body.message.forEach(function(item){
//						当前所有图片不管有多大都设置为宽高为400，就会导致图片失真了，所以应该按照图片的实际尺寸来设置
						var img = document.createElement('img');
						img.src = item.src;
						item.imageUrl=img.src;
						item.caption='';
					});
					this.images = body.message;
				});
			},
			getinfo(){
				var url='http://182.254.146.100:8899/api/getimageInfo/'+this.id;
				this.$http.get(url).then(function(res){
					if(res.body.status!=0){
						Toast(res.body.message);
						return;
					}
					this.photoinfo=res.body.message[0]	
				})
			}
		}
	}
</script>
<style scoped>
	/*图片详情样式*/
  #desc{
	  padding: 10px;
  }
	#desc  .title h4{
		color: #0094ff;
	}

  #desc .title p{
	color:rgba(0,0,0,0.4);
	  margin-top: 10px;
  }

  #desc .title .line{
	  width: 100%;
	  height: 1px;
	  border-bottom: 1px solid rgba(0,0,0,0.4);
  }
  .mui-content img{
		width: 100px;
		height: 100px;
	}
</style>